<template>
  <div>
    <div>
      <el-form ref="form" :model="form">
        <el-form-item
          prop="moduleId"
          label="选择子项目"
          :rules="[
            {
              required: true,
              message: '选择子项目',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="form.moduleId"
            placeholder="选择子项目"
            @change="handleChildChange"
          >
            <el-option
              v-for="item in moduleLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="moduleName"
          label="选择当前项目模块："
          :rules="[
            {
              required: true,
              message: '请选择当前项目模块',
              trigger: 'change',
            },
          ]"
        >
          <!-- <myElAutocomplete
            :form="form"
            attributeName="moduleName"
            :seleteLists="packageLists"
            placeholder="请选择当前项目模块"
            :isInput="false"
          /> -->
          <el-select v-model="form.moduleName" placeholder="请选择模块">
            <el-option
              v-for="item in packageLists"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="target_ProjectId"
          label="选择目标项目："
          :rules="[
            {
              required: true,
              message: '请选择目标项目',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <myElAutocomplete
            :form="form"
            attributeName="target_ProjectId"
            :seleteLists="targetProjectLists"
            valuekey="name"
            @inputEvent="handleChange"
            placeholder="请选择目标项目"
            :isInput="false"
          />
        </el-form-item>
        <div style="margin-bottom: 15px" v-show="form.target_ProjectId">
          <div v-show="isDependency">已引入此项目依赖</div>
          <div v-show="!isDependency">
            <span style="margin-right: 5px">未引入此项目依赖</span>
            <el-button type="primary" @click="handleClick"
              >点击引入依赖</el-button
            >
          </div>
        </div>
        <el-form-item
          prop="inter_faceId"
          label="选择目标接口："
          :rules="[
            {
              required: true,
              message: '请选择目标接口',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <myElAutocomplete
            :form="form"
            attributeName="inter_faceId"
            :seleteLists="interfaceLists"
            valuekey="requestChName"
            @inputEvent="handleChNameChange"
            placeholder="请选择目标接口"
            :isInput="false"
          />
        </el-form-item>

        <el-form-item
          label="openfeign接口名："
          prop="feignClientName"
          :rules="[
            {
              required: true,
              pattern: /^[A-Z]{1}[A-Za-z]+$/g,
              message: '请输入openfeign接口名,只能是英文并且首字母大写',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model.trim="form.feignClientName"
            placeholder="请输入openfeign接口名,只能是英文并且首字母大写"
            clearable
          />
        </el-form-item>

        <el-form-item
          label="描述："
          prop="feignDesc"
          :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]"
        >
          <el-input v-model.trim="form.feignDesc" clearable />
        </el-form-item>
        <div class="classCenter">
          <el-button class="filter-item" type="primary" @click="handleSave"
            >保存</el-button
          >
          <el-button
            class="filter-item"
            style="margin-left: 10px"
            type="primary"
            v-show="editDate"
            @click="handlecancle(false)"
            >取消</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  configItemExist,
  jlcpFeignInterfaceInfosave,
  listModulePackage,
  checkProjectDependency,
  addProjectDependency,
  listInterface,
  voClassNameExist,
  projectManageprojectModellist,
} from "@/api/lowcode";
import { projectfindPage } from "@/api/article";
import myElAutocomplete from "../commonComponents/myElAutocomplete.vue";
export default {
  name: "addinterfaceComponents",
  components: {
    myElAutocomplete,
  },
  props: ["editDate"],
  inject: ["SourceCodeTreeList", "moduleModetTreeList", "btnName"],
  data() {
    return {
      form: {
        projectId: +sessionStorage.getItem("developLowCodeId"),
        moduleName: "",
        target_ProjectId: "",
        inter_faceId: "",
        feignClientName: "",
        moduleId: "",
      },
      packageLists: [],
      targetProjectLists: [],
      isDependency: true,
      interfaceLists: [],
      moduleLists: [],
    };
  },
  async created() {
    this.projectfindPage();
    await this.projectManageprojectModellist();
    if (this.editDate) {
      this.form = JSON.parse(JSON.stringify(this.editDate));
    } else {
      this.form.moduleId = this.moduleLists[0]?.id;
    }
    this.listModulePackage();
  },
  methods: {
    handleChildChange() {
      this.form.moduleName = "";
      this.listModulePackage();
    },
    async projectManageprojectModellist() {
      this.moduleLists = [];
      const res = await projectManageprojectModellist(
        +sessionStorage.getItem("developLowCodeId")
      );
      if (res?.code === 200) {
        this.moduleLists = res.data;
      }
    },
    handleChNameChange(name) {
      let obj = this.interfaceLists.find((v) => v.requestChName === name);
      if (obj) {
        this.form.interfaceId = obj.id;
      } else {
        this.form.interfaceId = "";
      }
    },
    async handleChange(name) {
      this.form.inter_faceId = "";
      let obj = this.targetProjectLists.find((v) => v.name === name);
      if (obj) {
        this.form.targetProjectId = obj.id;
        const res = await checkProjectDependency(
          +sessionStorage.getItem("developLowCodeId"),
          obj.id
        );
        if (res?.code === 200) {
          this.isDependency = res.data;
        }
        this.listInterface(obj.id);
      } else {
        this.form.targetProjectId = "";
      }
    },
    async handleClick() {
      const res = await addProjectDependency(
        +sessionStorage.getItem("developLowCodeId"),
        this.form.targetProjectId
      );
      if (res?.code === 200) {
        this.isDependency = res.data;
      }
    },
    async listInterface(id) {
      const res = await listInterface(id);
      if (res?.code === 200) {
        this.interfaceLists = res.data;
      }
    },
    async listModulePackage() {
      this.packageLists = [];
      const res = await listModulePackage(
        +sessionStorage.getItem("developLowCodeId"),
        this.form.moduleId
      );
      if (res?.code === 200) {
        this.packageLists = res.data;
        // this.packageLists = res.data.map((item) => ({ value: item }));
      }
    },
    async projectfindPage() {
      this.targetProjectLists = [];
      const res = await projectfindPage({
        page: 1,
        limit: 9999,
      });
      if (res?.code === 200) {
        this.targetProjectLists = res.data.list.filter(
          (item) => item.id != sessionStorage.getItem("developLowCodeId")
        );
      }
    },
    async handletemplateBlur(obj, name, title) {
      const res = await configItemExist(
        +sessionStorage.getItem("developLowCodeId"),
        obj[name]
      );
      if (res?.code === 200) {
        if (res.data) {
          this.$message({
            message: `${title}已存在，请从新输入`,
            type: "warning",
            showClose: true,
          });
          obj[name] = "";
          return true;
        }
      }
    },
    handlecancle(flag) {
      if (this.editDate) {
        this.$emit("close", flag);
      } else {
        this.$parent.$parent.$parent.handledTableBtnSave(
          "新增feign调用接口",
          "feign调用接口列表",
          "feignComponents"
        );
      }
    },
    async handlessBlur(name, id) {
      const res = await voClassNameExist(name, id);
      if (res?.code === 200) {
        if (res.data) {
          this.$message({
            message: `openfeign接口名已存在，请从新输入`,
            type: "warning",
            showClose: true,
          });
          this.form.feignClientName = "";
          return true;
        }
      }
    },
    handleSave() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res = null;
          if (this.editDate) {
          } else {
            const flag = await this.handlessBlur(
              this.form.feignClientName,
              +sessionStorage.getItem("developLowCodeId")
            );
            if (flag) return;
            res = await jlcpFeignInterfaceInfosave(this.form);
          }
          if (res?.code === 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            if (this.btnName == "显示源码") {
              this.moduleModetTreeList();
            } else if (this.btnName == "显示模块") {
              this.SourceCodeTreeList();
            }
            this.handlecancle(true);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/layout-table.scss";
$rowLength: 2;
@media all and (min-width: 1659px) {
  $rowLength: 2;
  @include calculation($rowLength: $rowLength);
}
@media all and (max-width: 1659px) {
  $rowLength: 3;
  @include calculation($rowLength: $rowLength);
}
.titleClass {
  margin-bottom: 10px;
  color: #5a5e66;
  font-weight: 700;
}
.bigbox {
  border: 1px solid #ccc;
  padding-top: 15px;
}
.classCenter {
  display: flex;
  justify-content: center;
}
.commonClass {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
</style>
